<template>
	<view v-if="is_show">

		<view class="head">
			<view class="" :style="{'height':  statusBarHeight+'px'}"></view>
			<view class="head__box" :style="{'width':windowWidth+'px','height':  naviBarHeight+'px'}">
				<view @click="toBack" class="head__box__img">
					<image src="/static/icon/fanhui.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
				</view>
				<view style="font-size: 32rpx;color: #000000;">{{navigation_bar_title}}</view>
			</view>
		</view>
		<view class="" :style="{'height': Number(statusBarHeight + naviBarHeight)+'px'}"></view>


		<view class="" style="width: 100%;display: flex;flex-direction: column;padding-top: 50rpx;" :style="'min-height:'+ Number(windowHeight - Number(statusBarHeight + naviBarHeight) - 50)+'px'">
			<view class="" v-if="is_more" v-for="(item,index) in book_info.books" :key="index" style="margin-bottom: 100rpx;">
				<view class="" style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;padding-bottom: 60rpx;">
					
					<view class="" style="display: flex;flex-direction: column;align-items: center;position: relative;">
						<image :src="item.bookImg" mode="widthFix" style="width:200rpx;z-index: 6;"></image>

						<image src="../../static/img/bookZuo.png" style="width:350rpx;height: 100rpx;position: absolute;bottom: -70rpx;"
						 mode=""></image>
					</view>

					<view class="" style="color: rgb(57,57,56);font-weight: 700;font-size: 36rpx;margin-top: 60rpx;">
						{{item.bookName}}
					</view>
					<view class="" style="color: rgb(108,108,107);font-size: 34rpx;padding: 0rpx 100rpx;">
						{{item.bookAuthor}}
					</view>
					<view class="" style="color: rgb(0,217,54);font-size: 30rpx;" v-if="item.bookStatus == 1">
						{{item.bookStatus_dictText}}
					</view>
					<view class="" style="color:  rgb(218,168,31);font-size: 30rpx;" v-else>
						{{item.bookStatus_dictText}}
					</view>
				</view>
				<view class="" style="margin: 0 50rpx;border-top: 1px solid #F0F0F0;">
					
				</view>

			</view>
			<view class="" v-if="!is_more">
				<view class="" style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;padding-bottom: 60rpx;">
					<view class="" style="display: flex;flex-direction: column;align-items: center;position: relative;">
						<image :src="book_info.bookImg" mode="widthFix" style="width:200rpx;z-index: 6;"></image>

						<image src="../../static/img/bookZuo.png" style="width:350rpx;height: 100rpx;position: absolute;bottom: -70rpx;"
						 mode=""></image>
					</view>

					<view class="" style="color: rgb(57,57,56);font-weight: 700;font-size: 36rpx;margin-top: 60rpx;">
						{{book_info.bookName}}
					</view>
					<view class="" style="color: rgb(108,108,107);font-size: 24rpx;padding: 10rpx 150rpx;">
						{{book_info.bookAuthor}}
					</view>
					
					<view class="" style="color: rgb(0,217,54);font-size: 30rpx;" v-if="book_info.bookStatus == 1">
						{{book_info.bookStatus_dictText}}
					</view>
					<view class="" style="color:  rgb(218,168,31);font-size: 30rpx;" v-else>
						{{book_info.bookStatus_dictText}}
					</view>
				</view>
				<view class="" style="margin: 0 42rpx;border-top: 1px solid #f0f0f0;">
					
				</view>
				<view class="" style="padding: 60rpx 65rpx 0rpx 70rpx;display: flex;flex-direction: column;">
					<view class="" style="font-weight: 700;font-size: 38rpx;">
						简介
					</view>
					<view class="" style="padding: 10rpx 20rpx;">
						<text>
							{{book_info.bookInfo}}
						</text>
					</view>
				</view>
			</view>
			<view class="" v-if="!is_more" style="display: flex;align-items: center;justify-content: center;padding-top: 50rpx;padding-bottom: 50rpx;">
				<view class="" @click="addBookList" style="padding:15rpx 40rpx ;background-color: rgb(0,116,208);border-radius: 12rpx;color: #FFFFFF;">
					加入书单
				</view>
			</view>
		</view>







	</view>
</template>

<script>
	export default {
		data() {
			return {
				navigation_bar_title:'书籍详情',
				is_show: false,
				windowWidth: 0, //屏幕宽度
				windowHeight: 0, //屏幕高度
				titleHeight: 0, //状态栏和导航栏的总高度
				statusBarHeight: 0, //状态栏高度
				naviBarHeight: 0, //导航栏高度
				book_info: null, //图书信息
				my_book_list: null, //我的书单
				is_more: false, //是否为多本图书
			};
		},
		onLoad(option) {

			const res = uni.getSystemInfoSync()
			const system = res.platform
			this.statusBarHeight = res.statusBarHeight
			if (system === 'android') {
				this.titleHeight = (48 + this.statusBarHeight)
			} else if (system === 'ios') {
				this.titleHeight = (44 + this.statusBarHeight)
			}
			this.naviBarHeight = this.titleHeight - this.statusBarHeight

			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			this.windowHeight = uni.getSystemInfoSync().windowHeight;

			if (option.type == 'more') { //借阅详情
				this.$bookLending.fAppBooksGetBorrowByOrderId({
					orderNum: option.id,
				}).then((res) => {
					this.book_info = res.data.result
					this.is_more = true
					this.is_show = true
				})
				this.navigation_bar_title = '借阅详情'
		
				this.$forceUpdate()
			} else { //书籍详情
				this.book_info = typeof(decodeURIComponent(option.data)) == 'string' ? JSON.parse(decodeURIComponent(option.data)) :
					decodeURIComponent(option.data)
				this.is_more = false
				this.is_show = true
				this.navigation_bar_title = '书籍详情'
			}
			console.log(this.book_info)
			this.$bookLending.fAppBooksBookListList({
				pageNo: 1,
				pageSize: 10,
			}).then((res) => {
				this.my_book_list = res.data.result.records
				this.my_book_list.forEach(val => val.isReceive = false)
			}).catch(error => {
				console.log(error)
			})
		},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			//加入书单
			addBookList() {
				console.log(this.book_info.id)
				if (this.my_book_list.filter(val => val.id == this.book_info.id).length > 0) {
					uni.showToast({
						title: '此书籍已加入书单',
						duration: 2000,
						icon: 'none'
					});
					return
				}

				this.$bookLending.fAppBooksAddBookList({
					bookId: this.book_info.id
				}).then((res) => {
					console.log(res)
					uni.showToast({
						title: '添加成功',
						duration: 2000,
						icon: 'none'
					});
					uni.$emit('my_book')
					this.$bookLending.fAppBooksBookListList({
						pageNo: 1,
						pageSize: 10,
					}).then((res) => {
						this.my_book_list = res.data.result.records
						this.my_book_list.forEach(val => val.isReceive = false)
						console.log(this.my_book_list)
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.head {
		position: fixed;top: 0;left: 0;right: 0;background-color: #FFFFFF;border-bottom: 1px solid #f8f8f8;z-index: 999;
		&__box {
			display: flex;align-items: center;justify-content: center;position: relative;
			&__img {
				position:absolute;left: 43rpx;height: 100%;display: flex;align-items: center;justify-content: center;font-size: 32rpx;color: #000000;
			}
		}
	}
</style>
